import {Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output} from '@angular/core';
import {OlMap} from '../../entity/ol';
import OlDragBox from 'ol/interaction/DragBox';
import {BaseComponent} from '../../entity/base-component';
import {FitOptions} from 'ol/View';
import {BaseMapComponent} from '../../base-map/base-map.component';
import {SbMap} from '../../bean/SbMap';

@Component({
    selector: 'sb-zoom-extent',
    template: '',
    styles: ['']
})
export class ZoomExtentComponent implements OnInit, OnDestroy, BaseComponent {

    @Input() type = 1;

    @Output()
    closeEvent: EventEmitter<any>;

    private map: SbMap;
    private duration_ = 250;
    private dragBox: OlDragBox = null;

    constructor(@Inject(BaseMapComponent) public readonly baseMap: BaseMapComponent) {
        this.map = this.baseMap.map;
    }

    triggerClose() {
        this.closeEvent.emit();
    }


    ngOnInit() {
        if (this.type === 1) {
            this.startZoomIn();
        } else {
            this.startZoomOut();
        }
    }

    /**
     * 设置开始进行区域放大
     */
    startZoomIn() {
        this.type = 1;
        if (this.dragBox) {
            this.dragBox.setActive(true);
            return;
        } else {
            this.addZoomInteraction();
        }
    }

    /**
     * 设置开始进行区域缩小
     */
    startZoomOut() {
        this.type = 2;
        if (this.dragBox) {
            this.dragBox.setActive(true);
            return;
        } else {
            this.addZoomInteraction();
        }
    }

    hide() {
        this.dragBox.setActive(false);
        this.triggerClose();
    }

    ngOnDestroy(): void {
        this.hide();
    }

    /**
     * 添加dragBox
     */
    private addZoomInteraction() {
        const dragBox = new OlDragBox({});
        // 添加end 事件
        dragBox.on('boxend', () => {
            // 移除所有
            const extent = dragBox.getGeometry().getExtent();
            if (this.type === 1) {
                this.map.getView().fit(extent, {
                    size: this.map.getSize()
                } as FitOptions);
            } else {
                const a = this.map.getPixelFromCoordinate([extent[0], extent[1]]);
                const b = this.map.getPixelFromCoordinate([extent[2], extent[3]]);
                const p = Math.min(this.map.getSize()[0] / Math.abs((b[0] - a[0])), this.map.getSize()[1] / Math.abs((b[1] - a[1])));
                const wh = [extent[2] - extent[0], extent[3] - extent[1]];
                const center = [(extent[2] + extent[0]) / 2, (extent[3] + extent[1]) / 2];
                extent[0] = center[0] - (wh[0] / 2) * p;
                extent[1] = center[1] - (wh[1] / 2) * p;
                extent[2] = center[0] + (wh[0] / 2) * p;
                extent[3] = center[1] + (wh[1] / 2) * p;
                const lastZoom = this.map.getView().getZoom();
                this.map.getView().fit(extent, {
                    duration: this.duration_,
                    size: this.map.getSize()
                });
                // 如果想加快缩小速度，可以打开此注释
                // if (lastZoom == this.map.getView().getZoom()){
                //    this.map.getView().setZoom(lastZoom + (this.type==1) ? -1 : 1);
                // }
            }
        });

        this.map.addInteraction(dragBox);
        this.dragBox = dragBox;
    }

}
